<template>
  <div>
    <van-icon
        :color="value ? '#3692fa':'#777'"
        :name="value? 'star' :'star-o'"
        @click="collectFn"
      />
  </div>
</template>

<script>
import { collectArticleAPI, removeArticleAPI } from '@/api/article.js'
import { Toast } from 'vant'
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    artId: {
      type: [Number, Object],
      required: true
    }
  },
  methods: {
    async collectFn () {
      try {
        if (this.value) {
        // collectArticleAPI(this.artId)
          await removeArticleAPI(this.artId)
          Toast.success('取消收藏')
        } else {
          await collectArticleAPI(this.artId)
          Toast.fail('收藏成功')
        // console.log(this.artId)
        }
        this.$emit('input', !this.value)
      } catch (error) {
        Toast('系统异常')
      }
    }
  }
}
</script>

<style>

</style>
